<template>
	<view class="h100 pageBg" style="height: 100vh">
		<view class="userCenter-card" >
			<view class="userCenter-nav">
				我的
			</view>
			<view class="aic userinfo-card">
				<u-avatar style="width: 80rpx;height: 80rpx;" :src="src"></u-avatar>
				<view class="userinfo">
					<uni-title title="bluesky" type="h2" color="#FFF"></uni-title>
					<view class="">
						手机号：18336465466
					</view>
				</view>
			</view>
			<view class="userCenter-card-item jca boxShadow aic">
				<view class="fdc aic jcc" @tap="handleContract">
					<view class="userData">
						0
					</view>
					<view class="userItem gray25">
						我的合同
					</view>
				</view>
				<view class="" style="width: 1px;height: 75%; background-color:#F1F1F1;">
				</view>
				<view class="fdc aic jcc"  @tap="handleCommission">
					<view class="userData">
						0.00
					</view>
					<view class="userItem gray25">
						我的收入(元)
					</view>
				</view>
			</view>
		</view>
		<!-- 用户菜单 -->
		<view class="w100  user-menu ">
			<view class="user-menu-item">
				<u-cell-group style="background-color: #fff; " class="boxShadow">
						<u-cell-item title="我的佣金"
						 @tap="handleCommission"
						>
							<image
							 class="user-menu-icon"
							 src="../../static/u477.png" slot="icon" mode=""></image>
						</u-cell-item>
						<u-cell-item title="我的银行"
						@tap="handleSetBankCard"
						>
							<image  class="user-menu-icon" src="../../static/u478.png" slot="icon" mode=""></image>
						</u-cell-item>
						<u-cell-item title="个人信息"
						@tap="goUserdetail"
						>
							<image  class="user-menu-icon" src="../../static/u479.png" slot="icon" mode=""></image>
						</u-cell-item>
						<u-cell-item title="账号设置"
						@tap="handleAccount"
						>
							<image  class="user-menu-icon" src="../../static/u480.png" slot="icon" mode=""></image>
						</u-cell-item>
				</u-cell-group>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"userCenter",
		data() {
			return {
				src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/44f8d690-4f3d-11eb-b680-7980c8a877b8.svg',
			};
		},
		methods:{
			handleContract(){
				this.$emit('handleContract')
			},
			handleCommission(){
				this.$emit('handleCommission')
			},
			goUserdetail(){
				this.$emit('goUserdetail')
			},
			handleSetBankCard(){
					this.$emit('handleSetBankCard')
			},
			handleAccount(){
					this.$emit('handleAccount')
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.user-menu{
		padding: 0 35rpx;
		padding-top: 94rpx;
		width: 750rpx;
		box-sizing: border-box;
		.user-menu-icon{
			width: 35rpx;height: 35rpx;margin-top: 15rpx;margin-right: 10rpx;
		}
	}
	.user-menu-item{
		background-color: #c48;
		border-radius: 20rpx;
		overflow: hidden;
	}
	.userCenter-nav{
		padding-top: 58rpx;
		color: #FFFDEF;text-align: center;
	}
.userCenter-card{
	position: relative;
	z-index: 3;
	width: 750rpx;
	height: 451rpx;
	 background-image: linear-gradient(to right, $llt-type-primary , #2A9FFA);
	 .userCenter-card-item{
		 background-color: #fff;
		 border-radius: 20rpx;
		 width: 700rpx;
		 height: 200rpx;
		 position: absolute;
		 bottom: -39px;left:50%;
		 transform: translateX(-50%);
		 .userItem{
			 line-height: 2rem;
			
		 }
	 }
	 .userinfo-card{
		 width: 700rpx;
			margin-left: 60rpx;
		    color: #fff;
		    margin-top: 58rpx;
		 .userinfo{
		 		margin-left: 30rpx;
		 }
	 }
	 
}
</style>
